<template>
    <div class="father">
        <h3>高高在上的父组件</h3>
        <NextChild/>
        <ChildNode subTitle="subTitle是父组件传递的参数"/><!--这个标签指向component里的ChildNode组件，故标签上的属性也给到了组件上-->

        <ChildNode/>

        <ChildNode :name="name" :subTitle="'我是写在父组件中的'" :user="user"/>

        <!-- 给子组件定义了一个自定义事件，再把当前组件的方法作为回调函数绑定 -->
        <ChildNode :subTitle="'这part是子组件向父组件传递参数'" @attrEvent="myFunc"/>
    </div>
</template>
<script>
    import ChildNode from './child'
    import NextChild from './nextChild'

    export default {
        data(){
            return{
                name:'goodcai',
                user:{
                    userId:'admin',
                    userName:'超管',
                }
            }
        },
        components:{
            ChildNode,
            NextChild
        },
        methods:{
            myFunc(){
                console.log(arguments);
            }
        },
        created(){
            this.$root.eventBus.$on('listen',function(){
                console.log("全局事件监听");
                console.log(arguments);
            })
            //先监听再发送
            //写一个异步方法等待孙组件中的事件先监听  再触发$emit
            setTimeout(()=>{
                this.$root.eventBus.$emit('created',1008611);
            },3000);
        }
    }
</script>
<style scoped>
    .father{
        width: 500px;
        height: 500px;
        margin: 30px auto;
        text-align: center;
    }
    h3{
        border-bottom: 2px solid bisque;
        padding: 10px 0;
    }
</style>
